import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const WORK_ROUTE = {
  WorkConnect: defineAsyncComponent({
    hydrate: hydrateOnVisible(),
    loader: () => import('@/views/work/connect.vue'),
  }),
  WorkDebug: defineAsyncComponent({
    hydrate: hydrateOnVisible(),
    loader: () => import('@/views/work/debug.vue'),
  }),
  WorkDesign: defineAsyncComponent({
    hydrate: hydrateOnVisible(),
    loader: () => import('@/views/work/design.vue'),
  }),
  WorkBrowser: defineAsyncComponent({
    hydrate: hydrateOnVisible(),
    loader: () => import('@/views/work/browser.vue'),
  }),
  WorkDemo: defineAsyncComponent({
    hydrate: hydrateOnVisible(),
    loader: () => import('@/views/work/demo.vue'),
  }),
  WorkRelease: defineAsyncComponent({
    hydrate: hydrateOnVisible(),
    loader: () => import('@/views/work/release.vue'),
  }),

}

export default WORK_ROUTE
